<template>
  <div>
    <!-- 
    1. v-for 更新监测
      问题: 
      v-for遍历的数组发生变化是 页面会更新吗?
      哪些数组方法会让v-for更新 ? 哪些不能?   变更方法 会让页面更新  非变更方法不能让页面更新
        变更方法: reverse  push  pop  shift unshift  splice  sort
        非变更方法: map filter every some reduce slice
      非变更方法不会更改原数组 但是会返回新数组 所以可以用新数组替换旧数组 也可以更新页面
   -->

    <h3>1. v-for 更新监测</h3>
    <span>变更方法测试</span>
    <ul>
      <li v-for="(val, ind) in arr" :key="ind">{{ val }}</li>
    </ul>
    <button @click="revFn">翻转</button>
    <p>非变更方法测试</p>
    <ul>
      <li v-for="val in list" :key="val.id">{{ val }}</li>
    </ul>
    <button @click="filFn">过滤</button>
    <hr />
    <!-- 
      2. 修改data数据 (vue数据) 这里修改data数据 不只是修改单个属性值 要求实现响应式的效果
        2.1 修改基本数据  基本类型值直接修改即可 (其实是重新赋值)
        2.2 修改数组类型数据 和上面一样 变更方法直接修改 非变更方法 用新覆盖旧
        2.3 修改对象类型数据
          - 如果可以获取到对应的属性 可以直接修改 缺点:如果层次较深 不容易获取

     -->
    <h3>2. 修改data数据</h3>
    <p>基本数据展示: {{ msg }}</p>
    <button @click="handler1">修改基本数据</button>
    <p>对象数据:</p>
    <ul>
      <li v-for="(val, key) in person">{{ val }} -- {{ key }}</li>
    </ul>
    <button @click="handler2">修改对象</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [5, 4, 9],
      list: [
        { id: '001', content: '今天我们......' },
        { id: '002', content: '明天要下雨......' },
        { id: '003', content: '后天要放假......' }
      ],
      msg: 'hello',
      person: {
        name: 'laowang',
        age: 18,
        score: {
          math: 100,
          ch: 90
        }
      }
    }
  },
  methods: {
    // 变更方法 更新页面
    revFn() {
      this.arr.reverse()
    },
    // 非变更方法
    filFn() {
      this.list = this.list.filter((p) => p.content.includes('要'))
    },
    // 修改基本数据
    handler1() {
      this.msg = 'wo love vue'
    },
    // 修改对象
    handler2() {
      // 2.3.1 可以直接修改对象的属性的值 缺点 :层级深得不容易获取
      // (层级没有限制,只要能获取到这个属性),直接具有响应式
      // this.person.name = "laowang1";
      // this.person.score.math = 120;


      // 2.3.2 还有改的方式是重新赋值(也是具有响应式的) 克隆并覆盖
      // this.person = { ...this.person, age: 20 };


      // 2.3.3 vue实例提供的方法  可以修改和新增  下面两种方式都可以
      // this.$set(this.person, "sex", "男");
      // Vue.set(this.person, "sex", "男");

      // 2.3.4 可以通过修改属性的方法把被删除的属性值设置为null
      // this.person.age = null

      // 2.3.5 如果一定要删除并且具有响应式,请使用this.$delete方法
      this.$delete(this.person, "age");

    }
  }
}
</script>

<style>
</style>